<div
  #alert
  class="x-alert"
  cdkDrag
  [cdkDragDisabled]="!draggable"
  [cdkDragBoundary]="dragBoundary"
  [ngClass]="classMap"
  *ngIf="!hide"
  @x-fade-animation
  [@.disabled]="disabledAnimation"
  (@x-fade-animation.done)="onCloseAnimationDone()"
>
  <ng-container *ngIf="showIcon">
    <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
  </ng-container>
  <ng-template #iconTpl>
    <ng-container [ngSwitch]="type">
      <x-icon class="x-alert-icon" *ngSwitchCase="'success'" type="adf-check-circle"></x-icon>
      <x-icon class="x-alert-icon" *ngSwitchCase="'info'" type="adf-info-circle"></x-icon>
      <x-icon class="x-alert-icon" *ngSwitchCase="'warning'" type="adf-exclamation-circle"></x-icon>
      <x-icon class="x-alert-icon" *ngSwitchCase="'error'" type="adf-close-circle"></x-icon>
    </ng-container>
  </ng-template>
  <div class="x-alert-inner">
    <span class="x-alert-title" cdkDragHandle [class.x-bold]="title && content">
      <ng-container *xOutlet="title; context: { $iconTpl: iconTpl }">{{ title }}</ng-container>
    </span>
    <div class="x-alert-content" *ngIf="content">
      <ng-container *xOutlet="content; context: { $iconTpl: iconTpl }">{{ content }}</ng-container>
    </div>
    <x-button
      *ngIf="!hideClose"
      class="x-alert-close"
      size="small"
      [icon]="!closeText ? 'fto-x' : ''"
      [onlyIcon]="!closeText"
      [type]="closeText ? 'text' : 'initial'"
      (click)="onClose()"
      closable
      >{{ closeText }}</x-button
    >
  </div>
</div>
